<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>优惠券分享</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"
     style="padding: 20px 30px 0 0;">
    <div class="layui-form-item layui-hide">
        <div class="layui-input-inline">
            <input type="text" name="user_id" id="user_id" lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分享标题</label>
        <div class="layui-input-inline">
            <input type="text" name="title" id="title" lay-verify="required" placeholder="请输入标题" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分享内容</label>
        <div class="layui-input-inline">
            <textarea type="text" name="context" id="context" lay-verify="required" style="width: 400px; height: 80px;"
                      autocomplete="off" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分享的图片</label>
        <div class="layui-input-inline">
            <div class="layui-upload">
                <div class="layui-upload-list" id="shareimgupload">
                    <img class="layui-upload-img" src="images/uploadbk.png" id="shareimage" width="200" height="200">
                    <p id="demoText"></p>
                </div>
            </div>
            <input type="text" id="imagefile" name="imagefile" lay-verify="required" class="layui-hide">
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <label class="layui-form-label">分享的链接地址</label>
        <div class="layui-input-inline">
            <input name="link_url" id="link_url" lay-verify="required" placeholder="请输入分享链接" value="http://www.jkt365.com/coupons_detail" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <label class="layui-form-label">分享的类型</label>
        <div class="layui-input-inline">
            <select name="sharetype" lay-verify="required" lay-filter="share_select">
                <option value=""></option>
                <option value="1" selected>优惠券分享</option>
                <option value="2">商品分享</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分享金额:</label>
        <div class="layui-input-inline">
            <input name="price" id="price" placeholder="优惠券分享金额" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-hide" id="goods">
        <label class="layui-form-label">分享商品:</label>
        <div class="layui-input-inline">
            <select name="goodsid" id="goods_select">
                <option value=""></option>
                <option th:each="goods:${goodslist}" th:value="${goods.id}" th:text="${goods.commodityName}"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="确认添加">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="确认编辑">
    </div>
</div>

<script src="/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layui/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload'], function () {
        var $ = layui.$,
            upload = layui.upload
            , form = layui.form;
        var user = layui.data('user');
        $('#user_id').val(user.user_id)
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#shareimgupload'
            , url: '/upload/'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#shareimage').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                $('#imagefile').val(res.data.filename);
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
        /**
         * 监听选项卡切换
         */
        form.on('select(share_select)', function (data) {
            if (data.value == "1") {
                $('#goods').addClass("layui-hide");
                $('#goods_select').attr("lay-verify", "");
                $('#price').removeClass("layui-hide");
            } else if (data.value == "2") {
                $('#goods').removeClass("layui-hide");
                $('#goods_select').attr("lay-verify", "required");
                $('#price').addClass("layui-hide");
            }
        })
        //监听提交
        form.on('submit(layuiadmin-app-form-submit)', function (data) {
            var field = data.field; //获取提交的字段
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.post('addvoucher', field, function (resp) {
                if (resp.code == "0") {
                    layer.msg("添加成功");
                    parent.layui.table.reload('LAY-app-content-list'); //重载表格
                    parent.layer.close(index); //再执行关闭
                } else {
                    layer.msg("添加失败");
                }
            })

        });

    })
</script>
</body>
</html>